<template>
	<view class="">
		<u-navbar :fixed="false" :placeholder="true" title="修改密码" @leftClick="leftClick" bgColor="#0F53AC"
			leftIconColor="#fff">
		</u-navbar>
		<view class="np-box">
			<view class="np-title">
				设置新密码
			</view>
			<view class="" style="margin-bottom: 20rpx;">
				检测账号为第一次登录,为了您的账号安全,请修改原始密码,重新登录
			</view>
			<!-- <view class="zdy-input">
				<input class="pwd-left" :password="isOldPwd" name="oldPwd" placeholder="请输入原始密码" v-model="form.oldPwd" />
				<view class="iconfont " :class="[isOldPwd?'icon-app-yulan-close':'icon-app-yulan-open']"
					@click="switchIconOld()"></view>
			</view> -->
			<view class="zdy-input">
				<input class="pwd-left" :password="isShowPwd" name="userPwd" placeholder="请输入字母/数字/字符组成的6-16位密码"
					v-model="form.userPwd" />
				<view class="iconfont " :class="[isShowPwd?'icon-app-yulan-close':'icon-app-yulan-open']"
					@click="switchIcon()"></view>
			</view>
			<view class="zdy-input">
				<input class="pwd-left" :password="isNewShowPwd" name="sPassword" placeholder="请确认新密码"
					v-model="form.sPassword" />
				<view class="iconfont " :class="[isNewShowPwd?'icon-app-yulan-close':'icon-app-yulan-open']"
					@click="switchIconNew()"></view>
			</view>
			<view class="np-btn">
				<button :disabled='disabled' @click="$dianji(savePwd,'onoff')">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex";
	import md5 from '@/common/md5.min.js';
	export default {
		data() {
			return {
				onoff:true,
				phone: '',
				disabled: false,
				form: {
					// oldPwd: '',
					userPwd: '',
					sPassword: ''
				},
				// isOldPwd: true,
				isShowPwd: true,
				isNewShowPwd: true,
				oldPwd:''
			}
		},
		onLoad(options) {
			this.phone = options.phone
			this.oldPwd = options.oldPwd
		},

		methods: {
			leftClick() {
				let bindType = 1
				const sinfo = uni.getSystemInfoSync();
				if (sinfo.environment && sinfo.environment == 'wxwork') {
					bindType = 2
				} else if (sinfo.app && sinfo.app == 'DingTalk') {
					bindType = 3
				}

				uni.$u.http.post(`/base/mobile/userInfo/xcxLogout/${bindType}`).then(res => {
					if (res.code == 0) {
						let username = uni.getStorageSync('username')
						let password = uni.getStorageSync('password')
						let checked = uni.getStorageSync('checked')

						uni.clearStorageSync();
						if (checked) {
							uni.setStorageSync('username', username)
							uni.setStorageSync('password', password)
							uni.setStorageSync('checked', true)
						} else {
							uni.setStorageSync('username', username)
							uni.setStorageSync('checked', false)
						}
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/subPackagesD/login/index'
							})
						}, 500)
					}
				}).catch(err => {})
			},
			...mapMutations(["setRoleId"]),
			switchIconOld() {
				this.isOldPwd = !this.isOldPwd;
			},
			switchIcon() {
				this.isShowPwd = !this.isShowPwd;
			},
			switchIconNew() {
				this.isNewShowPwd = !this.isNewShowPwd;
			},
			savePwd() {
				const that = this
				let pwd = this.form.userPwd
				let sPwd = this.form.sPassword
				this.disabled = true
				if (pwd.length < 6 || pwd.length > 16) {
					uni.showToast({
						title: '密码不合法，密码限定长度6-16',
						icon: 'none'
					});
					this.disabled = false
					return
				}
				if (pwd !== sPwd) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					});
					this.disabled = false
					return
				}
				let params = {
					oldPwd: md5(this.oldPwd),
					userPwd: md5(this.form.userPwd)
				}
				uni.$u.http.post(`/base/mobile/userInfo/updatePwd`, params).then(res => {
					if (res.code === 0) {
						//这里清空数据
						uni.showToast({
							title: '修改成功!',
							icon: 'none'
						});
						uni.$u.http.get('/base/mobile/sysMenuInfo/getMobileMenuListByRole').then(res => {
							if (res.code == 0) {
								if (res.data && res.data.length > 0) {
									uni.setStorageSync('menu', res.data);
								}
								this.disabled = false
								that.setRoleId(0);
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/work/index'
									})
								}, 500)
							}
						}).catch(error => {
							uni.$u.toast(error)
						})
					}
				}).catch(() => {
					this.disabled = false
				})
			}
		}
	}
</script>

<style lang="scss">
	.np-box {
		padding: 28rpx;
	}

	.np-title {
		font-weight: bold;
		color: #313131;
		font-size: 60rpx;
		margin-bottom: 40rpx;
	}

	.zdy-input {
		margin-bottom: 30rpx;
		font-size: 28rpx;
		border-radius: 8px;
		background: rgba(242, 242, 242, 1);
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;

		.pwd-left {
			width: 90%;
			font-size: 28rpx;
			height: 80rpx;
			background: rgba(242, 242, 242, 1);
			border: none;
		}

		.iconfont {
			font-size: 40rpx;
		}

	}

	.np-btn {
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 6px;

		button {
			color: #fff;
			background: #0F53AC;
		}
	}
</style>